<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>网页转义</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/v1/css/base/coach.css">

</head>
<body>

<div class="layui-container">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;text-align: center">
        <legend>
            <i class="layui-icon layui-icon-heart-fill">&#xe68f;</i>
            HAO-TOOL
            <i class="layui-icon layui-icon-heart-fill">&#xe68f;</i>
        </legend>
    </fieldset>
    <div class="layui-form layui-form-pane" action="">

        <div class="layui-form-item layui-form ">
            <label class="layui-form-label">请输入网址</label>
            <div class="layui-input-block">
                <input type="text" name="title" autocomplete="off" placeholder="请输入您需要获取网站文字的地址（限制用户使用复制功能）" class="layui-input"
                       id="htmlStr">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择编码</label>
            <div class="layui-input-block">
                <select name="chartStr" lay-verify="required">
                    <option value="utf-8">utf-8</option>
                    <option value="gb2312">gb2312</option>
                </select>
            </div>
        </div>
        <div class="layui-row" style="text-align: center;margin: 10px">
            <button class="layui-btn layui-btn-normal btn-submit" type="button">提交</button>
        </div>
        <div class="layui-row">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">解析结果</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" style="height: 500px"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-row" style="display: none">
            <textarea id="demo" style="display: none"></textarea>
        </div>
        <div class="layui-row btn-copy" style="text-align: center;margin: 10px; display: none">
            <button class="layui-btn btn-copy" type="button">复制选中信息</button>
        </div>
    </div>

</div>
<div class="truck-wrapper" id="show-loading">
    <div class="truck">
        <div class="truck-container">
            <img src="http://i.lymtr.cn/cmhi/logo/3.2.png" width="100%">
        </div>
        <div class="glases"></div>
        <div class="bonet"></div>
        <div class="base"></div>
        <div class="base-aux"></div>
        <div class="wheel-back"></div>
        <div class="wheel-front"></div>
        <div class="smoke"></div>
    </div>
</div>
<script src="/static/v1/js/clipboard.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'layedit'], function () {
        var layer = layui.layer
            , form = layui.form;
        var layedit = layui.layedit;
        var $ = layui.$;

        var index = layedit.build('demo', {
            uploadImage: {
                url: '' //接口url
                , type: '' //默认post
            },
            height: 505,
            hideTool: ['link', 'unlink', 'face', 'image']
        });
        $("#show-loading").hide();

        $(".btn-submit").on("click", function () {
            var htmlStr = $("#htmlStr").val();
            var data = {
                    htmlStr: htmlStr,
                    chartStr: $("[name=chartStr]").val()
                }
            ;
            if (htmlStr == '' || htmlStr == undefined) {
                layer.msg("填写内容不能为空！");
                return;
            }
            var loadIndex = layer.load(1); //换了种风格
            $.ajax({
                url: "/rest/flower/transferHtml",
                type: "post",
                data: data,
                dataType: "json",
                success: function (data) {
                    if (data.code == '200') {
                        layer.msg("获取成功");
                        $(".layui-textarea").val(data.data);
                        layedit.setContent(index, data.data, false);
                    } else {
                        var msg = data.msg != '' ? data.msg : "转义失败";
                        layer.msg(msg);
                    }
                }, complete: function () {
                    layer.close(loadIndex);
                }
            })
        })

        new ClipboardJS('.btn-copy', {
            text: function (trigger) {
                return layedit.getSelection(index);
            }
        });
    });
</script>
</body>
</html>
